<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React基础</title>
    <style>
        .title {
            background: orange;
        }
    </style>
</head>
<body>
<!--准备好的容器-->
<div id="test">

</div>
</body>
<!--引入babel，用于将jsx转为js-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--核心库引入顺序，必须先是核心库然后在引入dom库-->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<!--用于支持react操作dom-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!--此处的type必须是Babel不能是JavaScript-->
<script type="text/babel">
    const myId = 'id'
    const myData = 'hello React'
    /*1.创建虚拟DOM*/
    const dom = (
        <div>
            <h2 className="title" id={myId.toLowerCase()}>
            <span style={{
                color: 'red',
                fontSize: '30px'
            }}>
                {myData.toLowerCase()}
            </span>
            </h2>
            <h2 className="title" id={myId.toLowerCase()}>
            <span style={{
                color: 'red',
                fontSize: '30px'
            }}>
                {myData.toLowerCase()}
            </span>
            </h2>
            <input type="text"/>
        </div>
    ) /*此处一定不要写引号，因为不是字符串*/
    /*2.渲染虚拟dom到页面*/
    ReactDOM.render(dom, document.getElementById('test'))
    /*
        jsx语法规则
            1.定义虚拟Dom时，不要写引号。
            2.标签中混入JS表达式时，要用花括号{}。
            3.样式的类名指定，不要用class，要用className。
            4.内联样式，要用style={{key:value}}的形式去写，多个单词要驼峰写法，比如fontSize。
            5.虚拟Dom只有一个根标签。
            6.标签必须闭合
            7.标签首字母
                a.若小写字母开头，则将该标签转换为Html重同名元素，若Html中无该标签对应的同名元素，则报错
                b.若大写字母开头，react就去渲染对应的组建，若组件没有定义，则报错

    */

</script>
</html>